<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>数据概况</title>
    <link rel="stylesheet" href="css/wodry.css">
    <link rel="stylesheet" href="css/survey.css">
    <link rel="stylesheet" href="css/public.css">
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script>
        $(function() {
            $('.myscroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });

            //自动轮播
            var timer = setInterval(autoPlay, 3000);

            function autoPlay() {
                var $bannerUl = $('#banner ul'),
                    $bannerLi = $('#banner ul li');
                //动态获取ul的宽度
                $bannerUl.css('width', $bannerLi.width() * $bannerLi.length);
                $bannerUl.animate({
                    'marginLeft': -$bannerLi.width()
                }, 500, function() {
                    $(this).animate({
                            'marginLeft': 0
                        }, 0)
                        .find('li').eq(0).appendTo($(this));
                    //把每次移动后的第一个li放到ul的最后面
                    /*
                     * 由于把第一个li放到ul的最后面，就会把第二个li挤到第一个li的位置，但是我们又需要显示第二个li，
                     * 所以需要移动回原点，但是这个移动过程不能被看到，所以执行时间是0
                     */
                });
            }

            // 清除和设置定时器
            $("#banner").mouseover(function() {
                clearInterval(timer);
            });

            $("#banner").mouseout(function() {
                timer = setInterval(autoPlay, 3000);
            })


        });


        $(document).ready(function() {
            var whei = $(window).width()
            $("html").css({
                fontSize: whei / 22
            });
            $(window).resize(function() {
                var whei = $(window).width();
                $("html").css({
                    fontSize: whei / 22
                })
            });
        });
    </script>
</head>

<body>
    <div class="main">
        <div class="header">
            <div class="header-left fl" id="time"></div>
            <div class="header-center fl">
                <div class="header-title">
                    物流数据概况
                </div>
                <div class="header-img"></div>
            </div>
            <div class="header-right fl"></div>
            <div class="header-bottom fl"></div>
        </div>
        <div class="center">
            <div class="center-left fl">
                <div class="left-top rightTop border">
                    <div class="title">基本信息</div>
                    <div class="top-list">
                        <span>
<b class="counter" id="countyCount">1</b>
<p>县服务中心</p>
</span>
                        <span>
<b class="counter" id="townCount">19</b>
<p>乡镇服务站</p>
</span>
                        <span>
<b class="counter" id="villageCount">290</b>
<p>村服务部</p>
</span>
                        <span class="last">
<b class="counter" id="userCount">2180</b>
<p>三级服务体系人员</p>
</span>
                    </div>
                </div>
                <div class="left-cen rightTop border">
                    <div class="title">店铺销售情况</div>
                    <div id="banner" class="banner">
                        <ul>
                            <li>
                                <div class="list clearfix">
                                    <div class="listTxt">
                                        <p> 商店名称：<span>华为旗舰店</span></p>
                                        <p>销售金额：<span>5000万</span></p>
                                        <p>所售商品：<span>电子产品、手机、电脑</span></p>
                                        <p>店铺地区：<span>全国 </span></p>
                                        <p>销售时间：<span>2020-11-11</span></p>
                                    </div>
                                    <div class="listImg"><img src="./images/touxiang.png"></div>
                                </div>
                            </li>
                            <li>
                                <div class="list clearfix">
                                    <div class="listTxt">
                                        <p> 商店名称：<span>小米旗舰店</span></p>
                                        <p>销售金额：<span>4000万</span></p>
                                        <p>所售商品：<span>电子产品</span></p>
                                        <p>店铺地区：<span>全国 </span></p>
                                        <p>销售时间：<span>2020-11-11</span></p>
                                    </div>
                                    <div class="listImg"><img src="./images/touxiang.png"></div>
                                </div>
                            </li>
                            <li>
                                <div class="list clearfix">
                                    <div class="listTxt">
                                        <p> 商店名称：<span>vivo旗舰店</span></p>
                                        <p>销售金额：<span>3500万</span></p>
                                        <p>所售商品：<span>电子产品</span></p>
                                        <p>店铺地区：<span>全国 </span></p>
                                        <p>销售时间：<span>2020-11-11</span></p>
                                    </div>
                                    <div class="listImg"><img src="./images/touxiang.png"></div>
                                </div>
                            </li>
                            <li>
                                <div class="list clearfix">
                                    <div class="listTxt">
                                        <p> 商店名称：<span>OPPO旗舰店</span></p>
                                        <p>销售金额：<span>3000万</span></p>
                                        <p>所售商品：<span>电子产品</span></p>
                                        <p>店铺地区：<span>全国 </span></p>
                                        <p>销售时间：<span>2020-11-11</span></p>
                                    </div>
                                    <div class="listImg"><img src="./images/touxiang.png"></div>
                                </div>
                            </li>

                        </ul>
                    </div>
                </div>
                <div class="left-bottom rightTop border">
                    <div class="title">商品分类占比</div>
                    <div class="bottom-b">
                        <div id="chart3" class="allnav"></div>
                    </div>
                </div>
                <div class="left-top rightTop border" style="margin-bottom:0px !important;">
                    <div class="title">基本信息</div>
                    <div class="top-list">
                        <span>
<b class="counter">1</b>
<p>县服务中心</p>
</span>
                        <span>
<b class="counter">19</b>
<p>乡镇服务站</p>
</span>
                        <span>
<b class="counter">290</b>
<p>村服务部</p>
</span>
                        <span class="last">
<b class="counter">2180</b>
<p>三级服务体系人员</p>
</span>
                    </div>
                </div>
            </div>
            <div class="center-cen fl">
                <div class="cen-top">
                    <div class="top-title">
                        <ul>
                            <li>
                                <p>数量统计</p>
                                <span>3</span>
                                <span>6</span>
                                <span>5</span>
                                <b>个</b>
                            </li>
                            <li>
                                <p>同比上升</p>
                                <span>1</span>
                                <span>3</span>
                                <b>%</b>
                            </li>
                        </ul>
                    </div>
                    <div class="top-bottom">
                        <div id="diqu" class="allnav" style="height: 4.4rem"></div>
                    </div>
                </div>
                <div class="cen-bottom rightTop border">
                    <div class="title">订单情况</div>
                    <div class="bottom-b">
                        <div id="chart4" class="allnav"></div>
                    </div>
                </div>
            </div>
            <div class="center-right fr">
                <div class="right-top rightTop border">
                    <div class="title">各年龄段占比</div>
                    <div class="right-top-cent">
                        <div id="shuiipin" class="allnav"></div>
                    </div>
                </div>
                <div class="right-cen border">
                    <div class="title">平台占比</div>
                    <div class="right-cen-cent">
                        <div id="chart2" class="allnav"></div>
                    </div>
                </div>
                <div class="right-bottom rightTop border">
                    <div class="title">全球贸易国家城市排行</div>
                    <div class="chat">
                        <div id="chart5" class="allnav"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="popup">
        <a href="javascript:;" class="popupClose"></a>
        <div class="summary">
            <div class="summaryTop">
                <div id="summaryPie1" class="summaryPie"></div>
                <div id="summaryPie2" class="summaryPie"></div>
                <div id="summaryPie3" class="summaryPie"></div>
            </div>
            <div class="summaryBottom">
                <div class="summaryBar">
                    <div class="summaryTit">

                    </div>
                    <div id="summaryBar"></div>
                </div>
                <div class="summaryLine">
                    <div class="summaryTit">

                    </div>
                    <div id="summaryLine"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
    <script src="js/wodry.min.js"></script>
    <script src="js/fontscroll.js"></script>
    <script src="js/survey.js"></script>
    <script>
        $('#chart3').on('click', function() {
            $('.filterbg').show();
            $('.popup').show();
            $('.popup').width('3px');
            $('.popup').animate({
                height: '76%'
            }, 400, function() {
                $('.popup').animate({
                    width: '82%'
                }, 400);
            });
            setTimeout(summaryShow, 800);
        });
        $('.popupClose').on('click', function() {
            $('.popupClose').css('display', 'none');
            $('.summary').hide();
            $('.popup').animate({
                width: '3px'
            }, 400, function() {
                $('.popup').animate({
                    height: 0
                }, 400);
            });
            setTimeout(summaryHide, 800);
        });

        function summaryShow() {
            $('.popupClose').css('display', 'block');
            $('.summary').show();
            setSummary();

        };

        function summaryHide() {
            $('.filterbg').hide();
            $('.popup').hide();
            $('.popup').width(0);
        };
    </script>
</body>

</html>